<template>
  <div class="health-box" style="padding-right: 12px">
    <a-spin :spinning="isHealthSpinning">
      <div class="title-box">
        <div class="title-item-left">
          <span class="text-icon" />
          健康信息
        </div>
      </div>
      <div class="health-info">
        <a-form>
          <a-form-item label="现有疾病" name="groupName">
            <div style="display: flex; align-items: flex-start; justify-content: space-between">
              <div>
                <template v-if="state.diagnosisJsonData.length == 0"> 无 </template>
                <template v-else>
                  <a-tag
                    v-for="(item, index) in state.diagnosisJsonData"
                    style="
                      height: 32px;
                      margin-bottom: 5px;
                      font-size: 14px;
                      line-height: 32px;
                      background-color: #f2f3f5;
                    "
                    :key="index"
                  >
                    {{ item }}
                  </a-tag>
                </template>
              </div>
            </div>
          </a-form-item>
        </a-form>
      </div>

      <div class="title-item">既往史</div>
      <a-table
        size="small"
        :pagination="false"
        :columns="state.diseaseHisColums"
        :dataSource="state.diseaseHisTabData"
      >
        <template #bodyCell="{ column, record, text, index }">
          <template v-if="column.dataIndex == 'source'">
            <template v-if="!record.isEdit && !record.source">无</template>
            <template v-else-if="!record.isEdit && record.source">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
            </template>
          </template>
        </template>
      </a-table>

      <div class="title-item">当前用药</div>
      <a-table
        size="small"
        :pagination="false"
        :columns="state.drugColums"
        :dataSource="state.drugJsonData"
      >
        <template #bodyCell="{ column, record, text, index }">
          <template v-if="column.dataIndex == 'source'">
            <template v-if="!record.isEdit && !record.source">无</template>
            <template v-else-if="!record.isEdit && record.source">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
            </template>
          </template>
        </template>
      </a-table>
    </a-spin>
  </div>

  <!-- 弹出框 -->
  <a-modal
    v-model:open="isExamHisVisible"
    title="查看既往结果"
    :footer="null"
    :maskClosable="false"
    :bodyStyle="{ padding: '0px 0px', minHeight: '400px' }"
    width="1200px"
  >
    <div class="health-box" style="padding: 12px 16px">
      <a-table
        size="small"
        :pagination="false"
        :columns="state.examColums"
        :dataSource="state.examHisTableData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'examItemName'">
            {{ record.examItemName ? record.examItemName : '无' }}
          </template>
          <template v-if="column.dataIndex === 'examTime'">
            {{ record.examTime ? record.examTime : '无' }}
          </template>
          <template v-if="column.dataIndex === 'quantitative'">
            {{ record.quantitative ? record.quantitative : '无' }}
          </template>
          <template v-if="column.dataIndex === 'qualitative'">
            {{ record.qualitative ? record.qualitative : '无' }}
          </template>
          <template v-if="column.dataIndex === 'unit'">
            {{ record.unit ? record.unit : '无' }}
          </template>
          <template v-if="column.dataIndex === 'source'">
            <template v-if="record.source">
              <a-button type="link" @click="detailData(record.source)">查看详情</a-button>
            </template>
            <template v-else>无</template>
          </template>
        </template>
      </a-table>
    </div>
  </a-modal>

  <!-- 数据详情 -->
  <a-modal v-model:open="detialOpen" title="数据详情" :zIndex="10001">
    <template #footer>
      <a-button @click="detialOpen = false">关闭</a-button>
    </template>
    {{ detailOpenData }}
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, h, createVNode } from 'vue'
import { getPatientMedicine, getPatientHistory, getPatientDisease } from '@/api/patientMana/index'

const isEditVisible = ref(false)
const state = reactive({
  inputVisible: false,
  inputValue: '',
  examColums: [
    {
      key: 'examTypeName',
      dataIndex: 'examTypeName',
      align: 'left',
      title: '检验检查类型',
      ellipsis: true,
      width: 110
    },
    {
      key: 'examItemName',
      dataIndex: 'examItemName',
      align: 'left',
      title: '检验检查名称',
      ellipsis: true,
      width: 110
    },
    {
      key: 'examTime',
      dataIndex: 'examTime',
      align: 'left',
      title: '检测时间'
    },
    {
      key: 'quantitative',
      dataIndex: 'quantitative',
      align: 'left',
      title: '定量结果'
    },
    {
      key: 'qualitative',
      dataIndex: 'qualitative',
      align: 'left',
      title: '定性结果'
    },
    {
      key: 'reference',
      dataIndex: 'reference',
      align: 'left',
      title: '参考范围/检查结论'
    },
    {
      key: 'unit',
      dataIndex: 'unit',
      align: 'left',
      title: '单位',
      width: 100
    },
    {
      key: 'source',
      dataIndex: 'source',
      align: 'left',
      title: '信息来源',
      width: 130,
      fixed: 'right'
    }
  ],
  diseaseHisColums: [
    {
      key: 'historyType',
      dataIndex: 'historyType',
      align: 'left',
      title: '既往史类型'
    },
    {
      key: 'historyName',
      dataIndex: 'historyName',
      align: 'left',
      title: '既往史名称'
    },
    {
      key: 'happenTime',
      dataIndex: 'happenTime',
      align: 'left',
      title: '既往史发生时间'
    },
    {
      key: 'source',
      dataIndex: 'source',
      align: 'left',
      title: '信息来源'
    }
  ],
  diagnosisJsonData: [], // 现有疾病
  examTableData: [], // 检验检查
  healdInfoData: {},
  infoData: {},
  examHisTableData: [], // 既往结果
  diseaseHisTabData: [], // 既往史
  drugColums: [
    {
      key: 'orderItemName',
      dataIndex: 'orderItemName',
      align: 'left',
      title: '药品名称'
    },
    {
      key: 'orderBeginTime',
      dataIndex: 'orderBeginTime',
      align: 'left',
      title: '开始用药时间'
    },
    {
      key: 'diagName',
      dataIndex: 'diagName',
      align: 'left',
      title: '用药目的'
    },
    {
      key: 'source',
      dataIndex: 'source',
      align: 'left',
      title: '信息来源'
    }
  ],
  drugJsonData: [], // 用药
  diseaseHisEditTabData: {}, // 既往史编辑
  oldPatientInfo: {},
  scoreNoData: [],
  listId: ''
})

const isHealthSpinning = ref(true)

const patId = ref()

const diseaseTypeData = ref(['既往疾病、外伤、手术史', '过敏史', '抗生素用药史'])

const isExamHisVisible = ref(false)
const detialOpen = ref(false)
const detailOpenData = ref({})
const diagnoslsData = ref([])

const init = (empi) => {
  isHealthSpinning.value = true
  isEditVisible.value = false
  diagnoslsData.value = []
  state.healdInfoData = {}
  state.examTableData = []
  state.diagnosisJsonData = []
  state.diseaseHisTabData = []
  state.drugJsonData = []

  state.scoreNoData = []

  getPatientDisease({ empi: empi }).then((res) => {
    state.diagnosisJsonData = res.data
  })

  // 既往史
  getPatientHistory({ empi: empi })
    .then((res) => {
      state.diseaseHisTabData = res.data
    })
    .catch(() => {
      isHealthSpinning.value = false
    })
  // 当前用药
  getPatientMedicine({ empi: empi })
    .then((res) => {
      state.drugJsonData = res.data
    })
    .catch(() => {
      isHealthSpinning.value = false
    })

  isHealthSpinning.value = false
}

const detailData = (data) => {
  detialOpen.value = true
  detailOpenData.value = data
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.title-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 32px;
  color: #1d2129;

  .title-item-left {
    font-size: 18px;
    font-weight: 600;
  }

  .text-icon {
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 8px;
    line-height: 32px;
    background: #165dff;
  }
}

.health-info .ant-form-item {
  margin-bottom: 10px;
}

.title-item {
  width: 100%;
  height: 32px;
  padding-left: 16px;
  margin: 24px 0 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  color: #1d2129;
  background: #f7f8fa;
}

.health-box {
  height: calc(100vh - 220px);
  overflow: hidden auto;
}
</style>
